<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 18px 22px 22px 22px;
    background-color: rgb(240, 242, 245);
    margin-bottom: 80px;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  .form-operator-button{
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    right: 0;
    bottom: 33px;
    height: 64px;
    line-height: 64px;
    text-align: right;
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.05);
    z-index: 10;
  }
  .form-el-radion{
    line-height: 30px;
    padding: 5px 0px;
    width: 100%;
  }
  .hex-form-inf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    margin-right: 40px;
    position: relative;
    min-height: 33px;
    margin-left: 60px;
    color:#347DE1;
    line-height: 33px;
  }
  .hex-form-inf-content-show {
    font-size: 14px;
    font-weight: 500;
  }
  .hex-form-inf-content{
    font-size: 14px;
    font-weight: 500;
    display: none;
  }
  .hex-form-inf-icon {
    font-size: 20px;
    margin-top: 5px;
    position: absolute;
    right: 0px;
  }
  .hex-form-inf .hex-form-inf-content-show{
    padding: 0 4%;
    background-color: #F7F9FA;
    border: 1px solid #347DE1;
    border-radius: 8px;
  }
</style>
<template>
  <div v-if="isShow == true">
    <el-card class="box-card" :body-style="{ padding: '20px 40px' }">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goMainBack">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content" style="font-size: 14px;">心跳日志详情</div>
        </div>
      </div>
      <div class="dataFrom">
        <el-form ref="form"  :model="form"  label-width="120px">
          <div>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="节点编码" prop="agentCode">
                  <el-input :disabled="true" v-model="form.agentCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    唯一编码，节点的编码
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                 <el-form-item label="节点名称"  prop="agentName" >
                    <el-input :disabled="true" v-model="form.agentName" />
                 </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    唯一编码，节点的名称
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="节点IP" prop="agentIp">
                  <el-input :disabled="true"  v-model="form.agentIp" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点的IP
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <!--<el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="节点端口" prop="agentPort">
                  <el-input :disabled="true"  v-model="form.agentPort" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点的端口号
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>-->
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="中心编码" prop="centerCode">
                  <el-input :disabled="true" v-model="form.centerCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    唯一编码，中心编码
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="中心IP" prop="centerIp">
                  <el-input :disabled="true" v-model="form.centerIp"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    中心的IP
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="当前并发数" prop="curConcurrenceNum">
                  <el-input-number :disabled="true" v-model="form.curConcurrenceNum"  :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    当前节点任务并发数
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="总并发数" prop="allConcurrenceNum">
                  <el-input-number :disabled="true" v-model="form.allConcurrenceNum"  :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点任务并发数阈值
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="当前资源数" prop="curResNum">
                  <el-input-number :disabled="true" v-model="form.curResNum"  :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    当前节点任务资源数
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="总资源数" prop="allResNum">
                  <el-input-number :disabled="true" v-model="form.allResNum"  :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点任务资源数阈值
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>

            <!--<el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="平均负载" prop="averageLoadInfo">
                  <el-input :disabled="true" v-model="form.averageLoadInfo" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    平均负载
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>-->
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="CPU状态信息" prop="cpuInfo">
                  <el-input :disabled="true" v-model="form.cpuInfo" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点cpu信息
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="内存状态信息" prop="memoryInfo">
                  <el-input :disabled="true" v-model="form.memoryInfo" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点内存信息
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>

            <!--<el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="进程信息" prop="processInfo">
                  <el-input :disabled="true" v-model="form.processInfo" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    进程信息
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>-->
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="swap交换分区信息" prop="swapInfo">
                  <el-input :disabled="true" v-model="form.swapInfo" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点交换分区信息
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="数据JSON" prop="dataJson">
                  <el-input :disabled="true" v-model="form.dataJson" type="textarea" :rows="5"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点心跳信息JSON
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
           <!-- <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="正在执行任务数" prop="execIngTaskNum">
                  <el-input :disabled="true" v-model="form.execIngTaskNum"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点正在执行任务数量
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>-->

            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="IO饱和度" prop="ioSaturability">
                  <el-input :disabled="true" v-model="form.ioSaturability" type="textarea" :rows="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    节点IO饱和度
                  </div>
                  <i
                    class="el-icon-info hex-form-inf-icon"
                    @click="onOperInf($event)"
                    data-status="off"
                  ></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  import logServer from '@/api/system/logManager'
  export default {
    name: 'heartBeatInf',
    components: {logServer},
    props: {
      goBack: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        isShow: false,
        form:{
          pkId: null,
          agentCode: null,
          centerCode:null,
          agentName: null,
          agentDesc: null,
          agentIp: null,
          cpuInfo:null,
          swapInfo:null,
          processInfo:null,
          dataJson:null,
          centerIp:null,
          execIngTaskNum:null,
          ioSaturability:null,
          memoryInfo:null,
          averageLoadInfo:null,
          // agentPort: null,
          agentStatus: null,
          serverVer: null,
          allConcurrenceNum:null,
          allResNum:null,
          curConcurrenceNum: null,
          curResNum: null,
          agentAdmin: null,
          serverAccount: null,
          serverPwd: null,
          keyCode: null
        },
      }
    },
    computed: {
    },
    created() {
      // console.log(this)
    },
    methods: {
      initHeartBeatInf(pkId) {
        this.isShow = true;
        logServer.getHeartbeatDetail(pkId)
          .then(res => {
            this.form = res;
          })
          .catch(error => {
            // console.log(error);
          });
      },
      goMainBack(){
        this.isShow = false;
        this.goBack();
      },
      /*点击显示提示信息*/
      onOperInf: function (e) {
        let status = e.target.getAttribute('data-status');
        let previousNode = e.target.previousElementSibling;
        if("off" == status){
          previousNode.setAttribute('class','hex-form-inf-content-show');
          e.target.setAttribute('data-status','on');
        }else {
          previousNode.setAttribute('class','hex-form-inf-content');
          e.target.setAttribute('data-status','off');
        }
      },
    }
  }
</script>
